<script>
import search from "./search.vue";

export default {
  data() {
    return {
      search_data: ""
    }
  },
  methods: {
    getSearch(data) {
      this.search_data = data;
    }
  },
  components: {
    search
  }
};
</script>

<template>
  <h2>Main</h2>
  <div>实时展示搜索框内容：{{ search_data }}</div>
  <!-- updateSearch 必须和子组件返回的方法名称一致，后面的 getSearch 是在父组件中自定义的名称，不必和子组件中的内容一致，只是在父组件中使用的名称，在父组件中保持一致即可 -->
  <search @updateSearch="getSearch"/>
</template>

<style scoped>

</style>